import React from 'react'
import {Row,Col,Icon,Breadcrumb,Affix,BackTop } from 'antd'
import Head from 'next/head'

import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'

import MarkNav from 'markdown-navbar'
import axios from 'axios'
import marked from 'marked'
import hljs from "highlight.js";

import Tocify from '../components/tocify.tsx'

import servicePath from '../config/apiUrl'







const Detailed = (props) => {
  
  const tocify = new Tocify()
  const renderer = new marked.Renderer();
 
  renderer.heading = function(text,level,raw){
     const anchor = tocify.add(text,level);
     return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;

  }

marked.setOptions({
        renderer: renderer, 
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
                return hljs.highlightAuto(code).value;
        }
  }); 

    let html = marked(props.article_content) 

  
    
  return (
  <>
    <Head>
      <title>Detailed</title>
    </Head>
    <Header/>
    <Row  className='comm-main' type='flex' justify='center'>
            <Col className='comm-left' xs={24} sm={24} md={16} lg={18} xl={14}> 
                  <div className='bread-div'>
                    <Breadcrumb>
                      <Breadcrumb.Item> <a href='/' > 
                      首页
                      </a></Breadcrumb.Item>
                      <Breadcrumb.Item> <a href='/'> 学习列表</a></Breadcrumb.Item>
                      <Breadcrumb.Item> <a >ののの</a></Breadcrumb.Item>
                    </Breadcrumb>
                  </div>
                  <div>
                    <div className='detailed-title'>
                        Aron の 菜鸡学习记录
                    </div>
                    <div className='list-icon center'>
                        <span> <Icon type='calendar'/>2021-06-15</span>
                        <span> <Icon type="book" />想啥乱写啥</span>
                        <span> <Icon type="eye" />22222人</span>
                    </div>
                    <div className='detailed-content'
                      dangerouslySetInnerHTML={{__html:html}}
                    >
                
                    </div>
                  </div>
            </Col>

            <Col className='comm-right' xs={0} sm={0} md={7} lg={5} xl={4}> 
            <BackTop />
                  <Author/>

                  <Affix offset={10}>
                    <div className='detailed-nav comm-box'>
                      <div className='nav-title'>文章目录</div>
                      {tocify && tocify.render()}
                      <MarkNav
                          classname = 'articlce-menu'
                          source ={html}
                          headingTopOffset={0}
                          ordered={false}
                      />
                    </div>
                  </Affix>


                  <Advert/>
            </Col>


    </Row>
        <Footer/>
 </>
  )
}

Detailed.getInitialProps = async(context)=>{

  console.log(context.query.id)
  let id =context.query.id
  const promise = new Promise((resolve)=>{

    axios(servicePath.getArticleById+id).then(
      (res)=>{
        // console.log(title)
        resolve(res.data.data[0])
      }
    )
  })

  return await promise
}
export default Detailed